<template>
	<view>
		<uni-popup ref="popup" type="center" background-color="#DFE1FA" borderRadius="75rpx 75rpx 0 0">
			<view class="boxs">
				<view class="title flex-center">
					切换单元
				</view>
				<view class="title-sub flex-align-center">
					<image src="@/static/images/review/jieshao.png" />
					<span>功能介绍</span>
				</view>
				<view class="content">
					<view class="tr-header flex-align-center">
						<view class="  tr-header-item " style="width: 10%;">
							单元名
						</view>
						<view class="tr-header-item unit-vocabulary">
							词汇
						</view>
						<view class="tr-header-item unit-sentence">
							句子
						</view>
						<view class="tr-header-item unit-yufa">
							语法
						</view>
						<view class="tr-header-item unit-kewen">
							课文
						</view>
						<view class="tr-header-item unit-xiti">
							习题
						</view>
						<view class="tr-header-item unit-handle">
							 
						</view>
					</view>
					<view class="td-list-box">
						<view class="td-list flex-align-center">
							<view class="unit-name td-list-item">
								Unit1
							</view>
							<view class="unit-vocabulary td-list-item">
								词汇一
							</view>
							<view class="unit-sentence td-list-item">
								词汇一
							</view>
							<view class="unit-yufa td-list-item">
								词汇一
							</view>
							<view class="unit-kewen td-list-item">
								词汇一
							</view>
							<view class="unit-xiti td-list-item">
								词汇一
							</view>
							<view class="choose-btn flex-center unit-handle">
								选择
							</view>
						</view>
						<view class="td-list">
						
						</view>
						<view class="td-list">
						
						</view>
					</view>
					
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "UnitSelect",
		data() {
			return {
				 

			};
		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			}

		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.boxs {
		height: 75vh;
		position: relative;
		padding: 0rpx 35rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 35rpx;
	}

	.title {
		text-align: center;
		width: px_2_vw(375);
		height: px_2_vw(88);
		font-weight: bold;
		font-size: px_2_vw(40);
		background-size: 100% 100%;
		background-image: url('@/static/images/review/qiehuandanyuan.png');
		margin: 0 auto;
		// left: 50%;
		// top: 2%;
		// left: 50%;
		// transform: translate(-50%,-50%);
		// position: absolute;
	}

	.title-sub {
		color: #0E6BFF;
		font-weight: bold;
		font-size: px_2_vw(30);
		position: absolute;
		top: 40rpx;
		left: 35rpx;

		image {
			margin-right: 10rpx;
			width: px_2_vw(30);
			height: px_2_vw(30);
		}
	}

	.content {
		background: #fff;
		flex: 1;
		margin-top: 52rpx;
		border-radius: 41rpx;
		padding: 16rpx 36rpx;

		.tr-header {
			padding: 23rpx 29rpx;
			margin-bottom: 20rpx;
			// padding-right: 160rpx;
		}

		.tr-header-item {
			// flex: 1;
			color: #898989 !important;;
			font-weight: 400;
			font-size: px_2_vw(30);
			text-align: center;
		}

		.unit-name {
			color: #000 !important;
			width: 10%;
			font-weight: bold;
			font-size: px_2_vw(30);
		}

		.unit-vocabulary {
			width: 25%;
		}

		.unit-sentence {
			width: 15%;
		}

		.unit-yufa {
			width: 15%;
		}

		.unit-kewen {
			width: 15%;
		}

		.unit-xiti {
			width: 10%;
		}
		.unit-handle {
			width: 10%;
		}
		.td-list-box {
			height: calc(75vh - 300rpx);
			// border: 1rpx solid #000;
			overflow-y: auto;
		}
		.td-list {
			background-color: #DFE1FA;
			height: px_2_vw(187);
			width: 100%;
			border-radius: 40rpx;
			margin-bottom: 48rpx;
			
		
			.td-list-item {
				color: #898989;
				font-size: px_2_vw(24);
				text-align: center;
			}
			.choose-btn {
				// position: absolute;
				min-height: px_2_vw(51);
				width: px_2_vw(116);
				border: 1rpx solid #0E6BFF;
				border-radius: 25rpx;
				color: #0E6BFF;
				font-size: px_2_vw(31);
				// margin-right: 40rpx;
				// right: 93rpx;
				 
			}

		}
	}
</style>